<style lang="scss" module>
.me {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 5px;
  a {
    display: none;
  }
}


.title {
    font-size: 25px;
    font-weight: 400;
}
</style>
<style lang="scss">
.codeText {
  display: flex;
  border:none;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  .jsoneditor-vue {
    flex: 1 1 auto;
  }
}
.jsoneditor-format {
  display: none;
}
.jsoneditor-compact {
  display: none;
}
.jsoneditor-menu {
  display: none;
}
.jsoneditor-outer {
  margin: 0;
  padding:0;
}
</style>
<template>
    <div :class="$style.me">
        <span v-if="!!title" :class="$style.title" :style="titleStyle">{{ title }}</span>
        <Divider v-if="!!title" style="margin: 6px"/>
      <Poptip v-show="showUpBtn" confirm :transfer="true" ref="pop"
              :title="$i18n.locale==='en'?'Confirm Prompt':'确认提示'"
              :style="{alignSelf:'center',margin:'5px',width:'100%'}"
              @on-ok="$emit('update',cloneValue)">
        <Button :type="error?'error':'success'" :style="{width:width}" long :disabled="error||!code">
          {{ $i18n.locale === 'en' ? 'Update' : '更新' }}
        </Button>
      </Poptip>
        <vue-json-editor ref="editor" v-model="cloneValue" :show-btns="false" :mode="'code'" :lang="$i18n.locale"
                         class="codeText"
                         @json-change="error=false"
                         @has-error="error=true"
        ></vue-json-editor>

    </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor';

export default {
    data() {
        return {
            error: false,
            cloneValue: {},
            width:'100%'
        }
    },
    props: {
        title: {default: () => undefined},
        titleStyle: {
            default: () => {
            }
        },
        code: {
            default: () => {
            }
        },
        showUpBtn:{
            default:()=>{
                return true
            }
        },
    },
    components: {
      vueJsonEditor
    },
    computed: {},
    mounted() {
      let _this=this;
      this.cloneValue = this.code;
      this.$nextTick(() => {
          this.$emit('load', this);
      })
      if(!!this.$refs.pop){
        let observer = new ResizeObserver(entries => {
          entries[0].target.children[0].style.width='100%'
        })
        this.$nextTick(() => {
          observer.observe(_this.$refs.pop.$el);
        })
      }
    },
    watch: {
        code(val) {
            this.cloneValue = this.code;
        }
    },
    methods: {
        refresh() {
            this.$forceUpdate();
        },
    }
}
</script>
    